<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=600px"><!--让手机端以查询到宽度为600px进行显示-->
    <title>9-1 媒体查询确定布局样式</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        body{
            margin:20px;
        }

        p{
            line-height: 600px;
            text-align: center;
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 20px;
        }
        #container{
            width: 960px;
            margin:auto;
            outline:1px dashed gray;
        }
        #wrapper{
            width:740px;
            float:left;
        }
        #main{
            width:520px;
            float: right;
            background-color: yellow;
        }
        #sub_a{
            width:200px;
            float: left;
            background-color: greenyellow;
        }
        #sub_b{
            width:200px;
            float: right;
            background-color: #76b6d3;
        }

        @media screen and (min-width: 1000px){
            #container{
                width:1000px;
            }
            #wrapper{
                width:780px;
            }
            #main{
                width:560px;
            }
        }
        @media screen and (min-width: 640px) and (max-width: 999px){
            #container{
                width:640px;
            }
            #wrapper{
                width:640px;
            }
            #main{
                width:420px;
            }
            p{
                line-height: 400px;
            }
            #sub_b{
                float: none;
                width:100%;
                clear: both;
                line-height: 150px;
            }
        }
        @media screen and (max-width: 639px){
            #container{
                width:100%;
            }
            #wrapper{
                width:100%;
                float: none;
            }
            #main{
                width:100%;
                float: none;
            }
            p{
                line-height: 300px;
            }
            #sub_a{
                float: none;
                width:100%;
            }
            #sub_b{
                float: none;
                width:100%;
            }
        }
    </style>
</head>
<body>
<h1>9-1 媒体查询确定布局样式</h1>
<h3>请通过改变浏览器窗口宽度来观察不同的布局样式</h3>
<code>
    @media screen and (min-width: 640px) and (max-width: 999px){
        /*对应于媒体宽度在640~999px之间应该显示的样式*/
    }
    /*其他样式请查看源码*/
</code>
<section id="container">
    <div id="wrapper">
        <p id="sub_a">sub_a</p>
        <p id="main">main</p>
    </div>
    <p id="sub_b">sub_b</p>
</section>
</body>
</html>